<template>
  <div>
    <!-- 头部 -->
    <headers />

    <!-- nav导航栏 -->
    <navLlist></navLlist>

    <!-- 轮播图 -->
    <banner />


    <!-- 主体区域 -->

      <div class="goods_box">
        <div class="main">
          <!-- 手机 -->
          <div class="phone">
            <div class="box_header">
              <div class="title">手机</div>
            </div>
            <div class="box_body">
              <div class="goods_list">
                <img :src="$target + 'public/imgs/phone/phone.png'" alt="" />
              </div>
              <div class="list">
                <my-list :listData="phoneList" @goDetail="goDetail"></my-list>
              </div>
            </div>
          </div>
          <!-- 家电 -->
          <div class="phone">
            <div class="box_header">
              <div class="title">家电</div>
              <div class="more">
                <div class="myMenu">
                  <ul>
                    <li
                      :class="applianceActive == 1 ? 'active' : ''"
                      @mouseover="applianceMouseOver($event, 1)"
                    >
                      热门
                    </li>
                    <li
                      :class="applianceActive == 2 ? 'active' : ''"
                      @mouseover="applianceMouseOver($event, 2)"
                    >
                      电视
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="box_body">
              <div class="goods_left">
                <ul>
                  <li>
                    <img
                      :src="
                        $target + 'public/imgs/appliance/appliance-promo1.png'
                      "
                    />
                  </li>
                  <li>
                    <img
                      :src="
                        $target + 'public/imgs/appliance/appliance-promo2.png'
                      "
                    />
                  </li>
                </ul>
              </div>
              <div class="list">
                <my-list
                  :listData="applianceHotList"
                  @goDetail="goDetail"
                ></my-list>
              </div>
            </div>
          </div>
          <!-- 配件 -->
          <div class="phone">
            <div class="box_header">
              <div class="title">配件</div>
              <div class="more">
                <div class="myMenu">
                  <ul>
                    <li
                      :class="partsActive == 1 ? 'active' : ''"
                      @mouseover="partsMouseOver($event, 1)"
                    >
                      热门
                    </li>
                    <li
                      :class="partsActive == 2 ? 'active' : ''"
                      @mouseover="partsMouseOver($event, 2)"
                    >
                      保护套
                    </li>
                    <li
                      :class="partsActive == 3 ? 'active' : ''"
                      @mouseover="partsMouseOver($event, 3)"
                    >
                      充电器
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="box_body">
              <div class="goods_left">
                <ul>
                  <li>
                    <img
                      :src="
                        $target + 'public/imgs/accessory/accessory-promo1.png'
                      "
                    />
                  </li>
                  <li>
                    <img
                      :src="
                        $target + 'public/imgs/accessory/accessory-promo2.png'
                      "
                    />
                  </li>
                </ul>
              </div>
              <div class="list">
                <my-list
                  :listData="partsHotList"
                  @goDetail="goDetail"
                ></my-list>
              </div>
            </div>
          </div>
        </div>
      </div>

    <!-- 底部 -->
    <footers></footers>
  </div>
</template>

<script>
import footers from "../components/footer/Footer";
import headers from "../components/header/Header";
import banner from "../components/banner/Banner";
import navLlist from "./nav/Nav";
import listApi from "@/api/index";
export default {
  name: "",
  components: { footers, headers, banner, navLlist },
  data() {
    return {
      phoneList: [], //手机的数据
      applianceList: [], //家电热门数据
      TVListData: [], //电视数据

      partsList: [], //配件热门数据
      coverListData: [], //保护套数据
      chargerListData: [], //充电器数据

      applianceHotList: [], //家电热门数据
      partsHotList: [], //配件热门数据
      partsActive: 1, //配件分类 1热门  2保护套 3充电器
      applianceActive: 1, //当前选择的分类表示 //热门家电 1:热门数据 2:电视
    };
  },

  created() {
    this.getProduct("phoneList", { categoryName: "手机" });
    this.getProduct("TVListData", { categoryName: "电视机" });
    this.getProduct("coverListData", { categoryName: "保护套" });
    this.getProduct("chargerListData", { categoryName: "充电器" });
    this.getProduct(
      "applianceList",
      { categoryName: ["电视机", "空调", "洗衣机"] },
      true
    );
    this.getProduct(
      "partsList",
      { categoryName: ["保护套", "保护膜", "充电器", "充电宝"] },
      true
    );
    // console.log("applianceActive", this.applianceActive, this.applianceList);
  },
  props: [],
  mounted() {},
  methods: {
    //获取商品列表
    async getProduct(dataName, data, hotFlag) {
      if (hotFlag) {
        var { data: res } = await listApi.getHotProduct(data);
        // console.log(res.Product);
        // this.phoneList = res.Product;
      } else {
        var { data: res } = await listApi.getPromoProduct(data);
        // console.log(res.Product);
        // this.phoneList = res.Product;
      }
      this[dataName] = res.Product;
    },

    applianceMouseOver(e, val) {
      //家电 1热门 2电视
      this.applianceActive = val;
    },
    partsMouseOver(e, val) {
      //配件 1热门  2保护套  3充电器
      this.partsActive = val;
    },

    goDetail(id) {
      console.log(id);
      this.$router.push("/detail?productID=" + id);
    },
  },
  computed: {},
  watch: {
    applianceActive(val) {
      //当applianceActive发生改变的时候 会触发监听属性
      if (!this.applianceList.length) {
        //如果刚开始applianceList没有内容 则证明没有点击过
        this.applianceList = this.applianceHotList;
      }
      this.applianceHotList = val === 1 ? this.applianceList : this.TVListData;
    },
    partsActive(val) {
      //1 --> 2|3
      //console.log("监听属性", val); //1partsList  2 coverListData  3chargerListData
      if (!this.partsList.length) {
        //如果原始数据源length=0 第一次切换数据
        this.partsList = this.partsHotList;
      }
      let curData = null;
      switch (val) {
        case 1:
          curData = this.partsList;
          break;
        case 2:
          curData = this.coverListData;
          break;
        case 3:
          curData = this.chargerListData;
          break;
      }
      this.partsHotList = curData;
    },
  },
};
</script>

<style lang="scss" scoped>
.nav {
  width: 85%;
  margin: 20px auto;
  .el-menu {
    max-width: 1225px;
    margin: 0 auto;
  }
  .el-input {
    width: 300px;
    margin-left: 200px;
  }
}

.goods_box {
  // height: 1800px;
  padding-bottom: 20px;
  background: #f5f5f5;
  .main {
    margin: 0 auto;
    max-width: 1225px;
    .box_header {
      margin: 20px 0 0 0;
      height: 58px;
      .title {
        float: left;
        font-size: 22px;
        font-weight: 200;
        line-height: 58px;
        color: #333;
      }
      .more {
        float: right;
        a {
          font-size: 16px;
          line-height: 58px;
          color: #424242;
          &:hover {
            color: #ff6700;
          }
        }
        .myMenu li {
          float: left;
          margin-left: 30px;
          &.active,
          &:hover {
            color: #ff6700;
            border-bottom: 2px solid #ff6700;
          }
        }
      }
    }
    .box_body {
      height: 615px;
      display: flex;
      .goods_list {
        height: 595px;
        width: 435px;
        padding: 15px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .goods_left li {
        width: 220px;
        height: 292px;
        margin: 0 0 11px 0;
        img {
          width: 100%;
          height: 100%;
        }
        &:hover {
          transform: translateY(-3px);
          box-shadow: 0 3px 10px #ccc;
        }
      }
    }
  }
}
</style>
